<template>
  <div class="hello">

    <div class="common-layout">
      <el-container>
        <el-header>
          <h1>开始three.js之旅</h1>
        </el-header>
        <el-container>
          <el-aside width="50%">
            <div id="webgl"></div>
          </el-aside>
          <el-container>
            <el-main>
              <div>

                <el-button type="primary" @click="goToSomePath()">跳转</el-button>
                <el-button type="primary" @click="changeState('scene')">场景场景（scene）</el-button>
                <el-button type="primary" @click="changeState('camera')">相机（camera）</el-button>
                <el-button type="primary">渲染器（renderer）</el-button>
                <el-button type="primary" @click="changeState('LlghtForm')">添加光源</el-button>
                <br>
                <el-button class="mt12" type="primary" @click="addOrbitControls">添加相机控件(OrbitControls)</el-button>
              </div>
              <div>
                <!--添加模型和 -->
                <div v-if="state=='scene'" class="mt16">

                  <!-- <el-button type="primary" @click="setClearAlpha()">模型（scene）</el-button> -->
                  <el-form :inline="true" :model="sceneValue">
                    <el-row>

                      <el-col :span="8">
                        <el-form-item label="物体形状" style="width: 98%;">
                          <el-select v-model="sceneValue.type" placeholder="please select your zone">
                            <el-option label="长方体" value="BoxGeometry" />
                            <el-option label="圆柱体" value="beijing" />
                            <el-option label="球体" value="beijing" />
                            <el-option label="圆锥" value="beijing" />
                            <el-option label="矩形平面" value="beijing" />
                            <el-option label="圆平面" value="beijing" />
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="网格位置x">
                          <el-input type="number" v-model="sceneValue.x" placeholder="x" clearable />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="网格位置y">
                          <el-input type="number" v-model="sceneValue.y" placeholder="x" clearable />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="网格位置z">
                          <el-input type="number" v-model="sceneValue.z" placeholder="z" clearable />
                        </el-form-item>
                      </el-col>

                      <el-col :span="8">
                        <el-form-item label="网络材质" style="width: 98%;">
                          <el-select v-model="sceneValue.material" placeholder="please select your zone">
                            <el-option v-for=" val in  materialList " :label="val.label" :value="val.value"
                              :key="val.value" />

                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item>
                          <el-button @click="addOne">
                            添加</el-button>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>
                <!--相机位置 -->
                <div v-if="state=='camera'" class="mt16">
                  <el-button type="primary" @click="showAll[0]=true">相机位置</el-button>
                  <el-row v-if="showAll[0]">
                    <el-form :inline="true" :model="positionValue">
                      <el-form-item label="x">
                        <el-input v-model="positionValue.x" placeholder="x" clearable />
                      </el-form-item>
                      <el-form-item label="y">
                        <el-input v-model="positionValue.y" placeholder="y" clearable />
                      </el-form-item>
                      <el-form-item label="z">
                        <el-input v-model="positionValue.z" placeholder="z" clearable />
                      </el-form-item>
                      <el-form-item label="z">
                        <el-input v-model="positionValue.z" placeholder="z" clearable />
                      </el-form-item>
                      <el-form-item label="z">
                        <el-input v-model="positionValue.post" placeholder="z" clearable />
                      </el-form-item>

                      <el-form-item>
                        <el-button @click="positionCamera">确定</el-button>
                      </el-form-item>
                    </el-form>
                  </el-row>

                </div>

                <component class="mt12" :is="state=='LlghtForm'?LlghtForm:''" @calllsit="calllsit"></component>
              </div>
            </el-main>

          </el-container>

        </el-container>
      </el-container>
    </div>

  </div>
</template>


<script setup>
import { ref, onMounted, reactive } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import LlghtForm from "./LlghtForm.vue";
import { useRouter } from "vue-router";
// import { ceshi } from "@/api/one";
const state = ref("LlghtForm");

const materialList = reactive([
  {
    value: "MeshBasicMaterial",
    label: "不受光照",
  },

  {
    value: "",
    label: "漫反射",
  },
  {
    value: "",
    label: "高光",
  },
  {
    value: "",
    label: "物理",
  },
]);
//切换不同环境
function changeState(val) {
  state.value = val;
}
const router = useRouter();
function goToSomePath() {
  router.push("/CP");
}

const sceneValue = reactive({
  type: "BoxGeometry",
  x: 10,
  z: 19,
  y: 0,
  material: "MeshBasicMaterial",
});
const showAll = reactive([]);
var camera, scene, renderer;
const oneAll = () => {
  scene = new THREE.Scene(); //创造场景
  // 模型对象
  const geometry = new THREE.BoxGeometry(50, 50, 50);

  //网格基础材质
  const material = new THREE.MeshBasicMaterial({
    color: 0x0000ff,
    transparent: true, //开启透明
    opacity: 0.5, //设置透明度
  });

  //网格模型;
  const mesh = new THREE.Mesh(geometry, material);
  mesh.position.set(10, 10, 0);
  scene.add(mesh);

  // AxesHelper：辅助观察的坐标系
  const axesHelper = new THREE.AxesHelper(250);
  // const material = new THREE.MeshBasicMaterial({
  //   color: 0x0000ff, //设置材质颜色
  //   transparent: true, //开启透明
  //   opacity: 0.5, //设置透明度
  // });
  scene.add(axesHelper);
  const width = 800; //宽度
  const height = 500; //高度
  // 相机
  camera = new THREE.PerspectiveCamera();
  camera.position.set(292, 223, 185);
  camera.lookAt(0, 0, 0);
  // WebGL渲染器

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(width, height);
  renderer.render(scene, camera);

  //three.js执行渲染命令会输出一个canvas画布(HTML元素)，你可以插入到web页面中
  // document.body.appendChild(renderer.domElement);
  console.log("dads", document.getElementById("webgl"));

  document.getElementById("webgl").appendChild(renderer.domElement);
};
//相机位置
const positionValue = reactive({ x: 292, y: 223, z: 185 });
function positionCamera() {
  // positionValue.post;

  camera.position.set(positionValue.x, positionValue.x, positionValue.z);
  renderer.render(scene, camera);
  // console.log("");
}
//添加相机控制
function addOrbitControls() {
  const controls = new OrbitControls(camera, renderer.domElement);
  // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
  controls.addEventListener("change", function () {
    renderer.render(scene, camera); //执行渲染操作
    console.log("camera.position", camera.position);
  }); //监听鼠标、键盘事件
}

//动态添加
function addOne() {
  let geometryVal;
  switch (sceneValue.type) {
    case "BoxGeometry":
      geometryVal = new THREE.BoxGeometry(150, 150, 150);
      break;
    case "":
      break;
  }
  var material = "";
  //网格基础材质
  switch (sceneValue.material) {
    case "MeshBasicMaterial":
      material = new THREE.MeshBasicMaterial({
        color: 0x0000ff,
        transparent: true, //开启透明
        opacity: 0.5, //设置透明度
      });
      break;
  }

  //网格模型;
  let mesh2 = new THREE.Mesh(geometryVal, material);
  mesh2.position.set(sceneValue.x, sceneValue.y, sceneValue.z);
  scene.add(mesh2);
  renderer.render(scene, camera);
}
//gais
onMounted(() => {
  oneAll();
  // ceshi("ss").then((x) => {
  //   console.log("dededeed", x);
  // });
});

const calllsit = function (x) {
  console.log("测测是是否", x);
};
</script>
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
